<template>
	<!-- 聊天页面 -->
	<view>
		<view class="container">
			<view class="botsny">
				<!-- <image class="logo-img" src="../../static/uni-center/aa.png"></image> -->
				<image class="logo-img" :src="doctor.doctorPto"></image>
				<view class="box">
					<view>
						<view view class="leftys">
						{{doctor.doctorName}}&ensp;&ensp;&ensp;&ensp;&ensp;
						{{doctor.doctorVariety==0 ?'兽医':'农医'}}	
						</view>
					</view>
					<view>
						<view class="yiyuan">{{hospital.hospitalName}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="cul-wrapper">
					<!--这里减掉的60为操作栏的高度和内边距之和-->
					<!-- <scroll-view :style="{height:scrollHeight-70+'px'}" scroll-y :scroll-into-view="scrollIndex"
						scroll-with-animation>
						<block v-for="(msg,index) in msgs" :key="index">
							<view :class="[msg.isme?'msg-me':'msg-service']" :id="'msg-'+index">
								<image class="avatar" v-if="!msg.isme" :src="anotherAvatar" lazy-load></image>
								<view class="msg-text">
									<view class="msg-text-content">
										<text>{{msg.data}}</text>
									</view>
								</view>
								<image class="avatar" v-if="msg.isme" :src="meAvatar" lazy-load></image>
							</view>
						</block>
					</scroll-view> -->
					
							<view style="width: 100%;height: 390px;">
								<view style="text-align: center;  float:center">欢迎用户：{{name}}</view>
								在线用户：
								<view style="text-align: center;" v-for="name in names">
									<view  @click="messageName(name)">{{name}}</view>
								
								</view>
								<view v-for="msg in message"  scroll-y="true" style="color: #000066;">
								{{msg}}
								</view>
							</view>
							<!-- <view style="width: 100%;height: 100%;background-color:#4CD964;">
								<input type="text" v-model="text" placeholder="请输入你的消息"></input>
								<button @click="sendMessage()">发送</button>
							</view> -->
							<view class="operation" :class="{'conversion':!conversion}">
								<input type="text" v-model="text" placeholder="请输入你的消息" :class="[conversion?'msg-input1':'msg-input2']"
									@tap="sub1(msgInput.msg2)" />
								<input type="text" v-model="msgInput.msg2" :class="[conversion?'msg-input2':'msg-input1']"
									@click="sendMessage()" />
							</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		name: 'CulChat',
		props: {
			//聊天窗体高度
			scrollHeight: {
				type: Number,
				default () {
					let height = 0
					//调用uni-app接口获取屏幕高度
					uni.getSystemInfo({
						//成功回调函数
						success(res) {
							//windoHeight为窗口高度，主要使用的是这个
							height = res.windowHeight
						}
					})
					return height
				}
			},
			meAvatar: {
				type: String
			},
			anotherAvatar: {
				type: String
			}
		},
		data() {
			return {
				title: '找医生',
				show: false,
				login: false,
				avatarUrl: "../../static/uni-center/logo.png",
				doctor: {},
				hospital:{},
				//控制按钮和文本框样式和功能的转换
				conversion: true,
				msgInput: {
					msg1: '',
					msg2: ''
				},
				//消息列表
				msgs: [],
				//滚动位置
				scrollIndex: '',
				text:'',
				message:[],
				name:'',
				names:''
			}
		},
		onLoad: function(option) {
			this.ordersId = option.ordersId
			console.log(this.ordersId)
			uni.request({
				url: 'http://localhost:8099/serviceedu/orders/findByIdOrders/' + this.ordersId,
				method: 'Get',
				success: (res) => {
					console.log(res.data)
					this.list = res.data
		
					uni.request({
						url: 'http://localhost:8099/serviceedu/doctor/findById/' + res.data.doctorId,
						method: 'GET',
						success: (res) => {
							console.log(res.data.data.list)
							this.doctor = res.data.data.list
		
							//查询医院
							uni.request({
								url: 'http://localhost:8099/serviceedu/hospital/findById/' +
									res.data.data.list.hospitalId,
								method: 'GET',
								success: (res) => {
									console.log(res.data.data.list)
		
									this.hospital = res.data.data.list
								}
							})
		
						}
					})
					
					uni.request({
						url: 'http://localhost:8099/serviceedu/customer/findById/' + res.data.customerId,
						method: 'GET',
						success: (res) => {
							console.log(res.data.data.list.customerName)
							this.name=res.data.data.list.customerName
							
							uni.connectSocket({
								url:'ws://localhost:8083/webSocket/'+ res.data.data.list.customerName,
								success:data=>{
									console.log("111111")
								}
							});
							
							uni.onSocketMessage( (res)=> {
										  console.log('收到服务器内容：' + res.data);
										  this.message.push(res.data)
										});
									
										uni.request({
											url:'http://localhost:8082/WebSocket/getUser',
											success:data=>{
												// this.names.push(data.data.data.names)
												var a =data.data.data.names
												this.names=a
												console.log(a)
											}
										})
							
						}
					})
					
				}
			})
		},
		

		methods: {
			sendMessage: function(){
							uni.sendSocketMessage({
								data:this.name+":"+this.text,
							})
				
							this.text=""
						},
			zxzx() {
				uni.reLaunch({
					url: './doctor'
				})
			},
			//滚动到指定位置
			jumpScroll() {
				//滚动到指定位置之前首先清空scrollIndex的值，否则只能滚动一次，再次调用就会失效
				this.scrollIndex = ''
				this.$nextTick(function() {
					this.scrollIndex = 'msg-' + (this.msgs.length - 1)
				})
			},
			sub1(val) {
				if (!this.conversion) {
					this.sub(val)
				}
			},
			sub2(val) {
				if (this.conversion) {
					this.sub(val)
				}
			},
			sub(val) {
				let _self = this;
				if (val) {
					//清空输入框中的文字
					this.msgInput.msg1 = ''
					this.msgInput.msg2 = ''
					let msg = {
						isme: true,
						data: val
					}
					this.msgs.push(msg)
					this.conversion = !this.conversion
					this.jumpScroll()
					this.$emit('submit', {
						message: val,
						callback: m => {
							let anotherMsg = {
								isme: false,
								data: m
							}
							_self.msgs.push(anotherMsg)
							_self.jumpScroll()
						}
					})
				} else {
					this.conversion = !this.conversion
					this.jumpScroll()
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	/* .title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
	.container {
		/* 定义容器 */
		display: flex;
		/* 设置容器排列方向 */
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
		/* background-color: #f0f0f0; */
	}

	.botsny {
		background-color: #f8f8f8;
		height: 120px;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-bottom: 10rpx;
	}

	.logo-img {
		width: 130upx;
		height: 130upx;
		border-radius: 200upx;
		left: 50px;
		top: 15px;
	}

	.box {
		/* border:lupx solid #333333; */
		height: 50%;
		width: 70%;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		margin-left: 70rpx;
	}

	.box>view {
		color: #000000;
		font-weight: bold;
		font-size: 30upx;
		flex: 1;
		height: 100upx;
		display: flex;
		/* border: 1upx solid #FFFFFF; */
		align-items: center;
		/* justify-content: center; */
	}

	.liaotian {
		background-color: #006600;
		height: 300px;
	}

	.button-yuanjiao {
		width: 170rpx;
		height: 50rpx;
		display: flex;
		margin-top: 30rpx;
		line-height: 50rpx;
		/* justify-content: center; */
		border-radius: 25px;
		background-color: #8bcbaf;
		font-size: 28rpx;
		color: #ffffff;

	}

	.leftys {
		font-size: 30upx;
		border-radius: 150upx;
		left: 100px;
		top: 35px;
		margin-left: 40px;
		margin-top: 10px;
		/* position: absolute; */
	}

	.yiyuan {
		font-size: 20upx;
		border-radius: 150upx;
		color: #7e7e7e;
		left: 100px;
		top: 55px;
		margin-left: 40px;
		margin-top: 8px;
		/* position: absolute; */
	}

	.wzl {
		font-size: 40upx;
		border-radius: 150upx;
		color: #0a7e0a;
		left: 100px;
		top: 70px;
		margin-left: 15px;
		align-items: center;
		/* position: absolute; */
	}

	.wzl1 {
		font-size: 20upx;
		border-radius: 150upx;
		left: 100px;
		top: 85px;
		align-items: center;
		margin-left: 20px;
		color: #b5b5b5;
		/* position: absolute; */
	}

	.wzl2 {
		font-size: 20upx;
		border-radius: 150upx;
		left: 100px;
		top: 85px;
		align-items: center;
		color: #b5b5b5;
	}

	.jibing {
		font-size: 20upx;
		border-radius: 150upx;
		left: 100px;
		align-items: center;
		margin-top: 10px;
	}

	.zx {
		font-size: 20upx;
		border-radius: 150upx;
		left: 150px;
		top: 105px;
		/* position: absolute; */
		color: #0a7e0a;
	}

	.fenjie {
		background-color: #d3d3d3;
		height: 5px;
		margin-top: 15px;
	}

	* {
		box-sizing: border-box;
		overflow: hidden;
	}

	.cul-wrapper {
		width: 100vw;
		padding: 0 35rpx;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.msg-text {
		width: 560rpx;
	}

	.msg-me>.msg-text {
		display: flex;
		justify-content: flex-end;
	}

	.msg-text-content {
		line-height: 35rpx;
		display: inline-block;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;
	}

	.msg-me>.msg-text>.msg-text-content {
		margin-left: 70rpx;
		background-color: #8bcbaf;
		border: 3rpx solid #d5e0e5;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 30rpx;
		border-top-left-radius: 10rpx;
		margin-right: 15rpx;
	}

	.msg-service>.msg-text>.msg-text-content {
		color: #FFFFFF;
		margin-left: 15rpx;
		background-color: #3875ff;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 10rpx;
		margin-right: 70rpx;
	}

	.operation {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		background: #FFFFFF;
		padding: 10px 35rpx;
		border-top: 2rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
		/* background-color: #8bcbaf; */
	}

	.conversion {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.msg-input1 {
		background: #FFFFFF;
		height: 40px;
		width: 520rpx;
		border-radius: 10px;
		padding: 0 20rpx;
		border: 5rpx solid rgba(9, 9, 9, 0.1);
	}

	.msg-input2 {
		display: flex;
		align-items: center;
		width: 140rpx;
		margin-left: 30rpx;
		height: 40px;
		background-color: #007AFF;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 20px 20px;
		border-radius: 10px;
		/*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
		color: rgba(0, 0, 0, 0);
	}
</style>
